<html>
<head></head>
<body><a name="ZH-CN_TOPIC_0000002278806404"></a><a name="ZH-CN_TOPIC_0000002278806404"></a>
<h1>固定样式弹出框</h1>
<div><p>
    固定样式弹出框采用固定的布局格式，这使得开发者无需关心具体的显示布局细节，只需输入所需显示的文本内容，从而简化了使用流程，提升了便捷性。</p>
    <div class="section" id="使用约束"><a name="ZH-CN_TOPIC_0000002278806404__%E4%BD%BF%E7%94%A8%E7%BA%A6%E6%9D%9F"></a><a
            name="%E4%BD%BF%E7%94%A8%E7%BA%A6%E6%9D%9F"></a>     <h4>使用约束</h4>
        <ul>
            <li><p>
                可以通过调用UIContext或getUIContext，在非UI页面或某些异步回调中使用本文中的接口。CalendarPickerDialog当前不支持此操作。</p>
            </li>
            <li><p>操作菜单 (showActionMenu)、对话框 (showDialog)需先使用UIContext中的<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#getpromptaction"
                    target="_blank">getPromptAction()</a>方法获取到PromptAction对象，再通过该对象调用对应方法。</p></li>
            <li><p>列表选择弹出框 (ActionSheet)、警告弹出框 (AlertDialog)、选择器弹出框
                (PickerDialog)中除CalendarPickerDialog都需先使用ohos.window中的<a
                        href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#getuicontext10"
                        target="_blank">getUIContext()</a>方法获取UIContext实例，再通过此实例调用对应方法。或者可以通过自定义组件内置方法<a
                        href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-api#getuicontext"
                        target="_blank">getUIContext()</a>获取。</p></li>
        </ul>
        <p>操作菜单 (showActionMenu)、对话框 (showDialog)、列表选择弹出框 (ActionSheet)、警告弹出框
            (AlertDialog)可以设置isModal为false变成非模态弹窗。</p>
        <p>操作菜单 (showActionMenu)、对话框 (showDialog)、列表选择弹出框 (ActionSheet)和警告弹出框
            (AlertDialog)不支持设置内容区的字体样式，如字体颜色、大小换行等操作，如需自定义样式，建议使用<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-uicontext-custom-dialog">不依赖UI组件的全局自定义弹出框</a>或者<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-custom-dialog">基础自定义弹出框</a>。
        </p></div>
    <div class="section" id="生命周期"><a name="ZH-CN_TOPIC_0000002278806404__%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"></a><a
            name="%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"></a>     <h4>生命周期</h4>
        <p>弹出框提供了生命周期函数，用于通知用户该弹出框的生命周期。生命周期的触发时序依次为：onWillAppear -&gt;
            onDidAppear -&gt; onWillDisappear -&gt; onDidDisappear，也可参照各组件API。</p>
        <p>从API version
            19开始，对话框（showDialog）、列表选择弹出框（ActionSheet）、警告弹出框（AlertDialog）支持以下生命周期。</p>
        <div class="tablenoborder">
            <table>
                <thead>
                <tr>
                    <th align="left" class="cellrowborder" id="mcps1.3.3.4.1.4.1.1" valign="top"
                        width="33.33333333333333%">名称
                    </th>
                    <th align="left" class="cellrowborder" id="mcps1.3.3.4.1.4.1.2" valign="top"
                        width="33.33333333333333%">类型
                    </th>
                    <th align="left" class="cellrowborder" id="mcps1.3.3.4.1.4.1.3" valign="top"
                        width="33.33333333333333%">说明
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">onWillAppear</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">Callback&lt;void&gt;</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">弹出框显示动效前的事件回调。</td>
                </tr>
                <tr>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">onDidAppear</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">Callback&lt;void&gt;</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">弹出框弹出后的事件回调。</td>
                </tr>
                <tr>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">onWillDisappear</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">Callback&lt;void&gt;</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">弹出框退出动效前的事件回调。</td>
                </tr>
                <tr>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">onDidDisappear</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">Callback&lt;void&gt;</td>
                    <td class="cellrowborder" valign="top" width="33.33333333333333%">弹出框消失后的事件回调。</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="section" id="操作菜单-showactionmenu"><a
            name="ZH-CN_TOPIC_0000002278806404__%E6%93%8D%E4%BD%9C%E8%8F%9C%E5%8D%95-showactionmenu"></a><a
            name="%E6%93%8D%E4%BD%9C%E8%8F%9C%E5%8D%95-showactionmenu"></a>     <h4>操作菜单 (showActionMenu)</h4>
        <p>操作菜单通过UIContext中的getPromptAction方法获取到PromptAction对象，再通过该对象调用<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showactionmenu11"
                target="_blank">showActionMenu</a>接口实现，支持在回调或开发者自定义类中使用。</p>
        <p>创建并显示操作菜单后，菜单的响应结果会异步返回选中按钮在buttons数组中的索引。</p>
        <pre class="ts">import { PromptAction } from '@kit.ArkUI';

let uiContext = this.getUIContext();
let promptAction: PromptAction = uiContext.getPromptAction();
try {
  promptAction.showActionMenu({
    title: 'showActionMenu Title Info',
    buttons: [
      {
        text: 'item1',
        color: '#666666'
      },
      {
        text: 'item2',
        color: '#000000'
      },
    ]
  })
    .then(data =&gt; {
      console.info('showActionMenu success, click button: ' + data.index);
    })
    .catch((err: Error) =&gt; {
      console.error('showActionMenu error: ' + err);
    })
} catch (error) {
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.04706356615872196051016244193459:50001231000000:2800:0E5A02FCB085A4B23BA41ABA231CA6AABA028F04977E981A1940612CFD825A1E.gif"></span>
        </p></div>
    <div class="section" id="对话框-showdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E5%AF%B9%E8%AF%9D%E6%A1%86-showdialog"></a><a
            name="%E5%AF%B9%E8%AF%9D%E6%A1%86-showdialog"></a>     <h4>对话框 (showDialog)</h4>
        <p>对话框通过UIContext中的getPromptAction方法获取到PromptAction对象，再通过该对象调用<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showdialog"
                target="_blank">showDialog</a>接口实现，支持在回调或开发者自定义类中使用。</p>
        <p>创建并显示对话框，对话框响应后异步返回选中按钮在buttons数组中的索引。</p>
        <pre class="ts">// xxx.ets
import { PromptAction } from '@kit.ArkUI';

let uiContext = this.getUIContext();
let promptAction: PromptAction = uiContext.getPromptAction();
try {
  promptAction.showDialog({
    title: 'showDialog Title Info',
    message: 'Message Info',
    buttons: [
      {
        text: 'button1',
        color: '#000000'
      },
      {
        text: 'button2',
        color: '#000000'
      }
    ]
  }, (err, data) =&gt; {
    if (err) {
      console.error('showDialog err: ' + err);
      return;
    }
    console.info('showDialog success callback, click button: ' + data.index);
  });
} catch (error) {
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.18626196082030615043256701856907:50001231000000:2800:1CFB9B9416DAAF0D1B5BEA470C1AADE7C3CAF6CA80300DDD7660A41430C54593.gif"></span>
        </p></div>
    <div class="section" id="选择器弹窗-pickerdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-pickerdialog"></a><a
            name="%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-pickerdialog"></a>     <h4>选择器弹窗
        (PickerDialog)</h4>
        <p>选择器弹窗通常用于在用户进行某些操作（如点击按钮）时显示特定的信息或选项。</p></div>
    <div class="section" id="日历选择器弹窗-calendarpickerdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E6%97%A5%E5%8E%86%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-calendarpickerdialog"></a><a
            name="%E6%97%A5%E5%8E%86%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-calendarpickerdialog"></a>     <h4>
        [h2]日历选择器弹窗 (CalendarPickerDialog)</h4>
        <p>日历选择器弹窗提供日历视图，包含年、月和星期信息，通过<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-calendarpicker-dialog"
                target="_blank">CalendarPickerDialog</a>接口实现。开发者可调用show函数，定义并弹出日历选择器弹窗。</p>
        <p>日历选择器弹窗的弹出依赖UI的执行上下文，不可在<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-global-interface">UI上下文不明确</a>的地方使用，具体约束参见<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#uicontext"
                target="_blank">UIContext</a>说明。</p>
        <p>通过配置 acceptButtonStyle、cancelButtonStyle可以实现自定义按钮样式。</p>
        <pre class="ts">// xxx.ets
@Entry
@Component
struct CalendarPickerDialogExample {
  private selectedDate: Date = new Date('2024-04-23');

  build() {
    Column() {
      Button("Show CalendarPicker Dialog")
        .margin(20)
        .onClick(() =&gt; {
          console.info("CalendarDialog.show")
          CalendarPickerDialog.show({
            selected: this.selectedDate,
            acceptButtonStyle: {
              fontColor: '#2787d9',
              fontSize: '16fp',
              backgroundColor: '#f7f7f7',
              borderRadius: 10
            },
            cancelButtonStyle: {
              fontColor: Color.Red,
              fontSize: '16fp',
              backgroundColor: '#f7f7f7',
              borderRadius: 10
            },
            onAccept: (date: Date)=&gt;{
              // 当弹出框再次弹出时显示选中的是上一次确定的日期
              this.selectedDate = date;
            }
          })
        })
    }.width('100%')
  }
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.76860819912414715406245905206666:50001231000000:2800:69DC1D3EB6EE202A5DEB36F2446420F585156CBFD5BB44CE88510682312F3F6E.gif"></span>
        </p></div>
    <div class="section" id="日期滑动选择器弹窗-datepickerdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E6%97%A5%E6%9C%9F%E6%BB%91%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-datepickerdialog"></a><a
            name="%E6%97%A5%E6%9C%9F%E6%BB%91%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-datepickerdialog"></a>
        <h4>[h2]日期滑动选择器弹窗 (DatePickerDialog)</h4>
        <p>开发者可以利用指定的日期范围，创建日期滑动选择器弹窗，将日期信息清晰地展示在弹出的窗口上。</p>
        <p>日期滑动选择器弹窗通过UIContext中的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showdatepickerdialog"
                target="_blank">showDatePickerDialog</a>接口实现。</p>
        <p>
            弹窗中配置lunarSwitch、showTime为true时，会展示切换农历的开关和时间，当checkbox被选中时，会显示农历。当按下确定按钮时，弹窗会通过onDateAccept返回目前所选中的日期。如需弹窗再次弹出时显示选中的是上一次确定的日期，就要在回调中重新给selectTime进行赋值。</p>
        <pre class="ts">@Entry
@Component
struct DatePickerDialogExample {
  @State selectTime: Date = new Date('2023-12-25T08:30:00');

  build() {
    Column() {
      Button('showDatePickerDialog')
        .margin(30)
        .onClick(() =&gt; {
          this.getUIContext().showDatePickerDialog({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectTime,
            lunarSwitch: true,
            showTime: true,
            onDateAccept: (value: Date) =&gt; {
              this.selectTime = value;
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value));
            },
          });
        })
    }.width('100%').margin({ top: 5 })
  }
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.05453009806882222241179291543089:50001231000000:2800:0D3DBF7225775153699400274956052B2643FE3FF8AF031473AFF81082E4F7A7.gif"></span>
        </p>
        <p>
            该示例通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现了自定义文本以及按钮样式。</p>
        <pre class="ts">@Entry
@Component
struct DatePickerDialogExample {
  @State selectTime: Date = new Date('2023-12-25T08:30:00');

  build() {
    Column() {
      Button('showDatePickerDialog')
        .margin(30)
        .onClick(() =&gt; {
          this.getUIContext().showDatePickerDialog({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectTime,
            textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
            selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
            acceptButtonStyle: {
              fontColor: '#2787d9',
              fontSize: '16fp',
              backgroundColor: '#f7f7f7',
              borderRadius: 10
            },
            cancelButtonStyle: {
              fontColor: Color.Red,
              fontSize: '16fp',
              backgroundColor: '#f7f7f7',
              borderRadius: 10
            }
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.42709674081009824393334921505753:50001231000000:2800:6A190821BEF0CE8D56B42BB8223EF14F6075811A53065797E50CF35CB3DC0D63.gif"></span>
        </p></div>
    <div class="section" id="时间滑动选择器弹窗-timepickerdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E6%97%B6%E9%97%B4%E6%BB%91%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-timepickerdialog"></a><a
            name="%E6%97%B6%E9%97%B4%E6%BB%91%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-timepickerdialog"></a>
        <h4>[h2]时间滑动选择器弹窗 (TimePickerDialog)</h4>
        <p>开发者可根据24小时的时间区间，创建时间滑动选择器弹窗，将时间信息清晰地展示在弹出的窗口上。</p>
        <p>时间滑动选择器弹窗通过UIContext中的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showtimepickerdialog"
                target="_blank">showTimePickerDialog</a>接口实现。</p>
        <p>
            该示例通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现了自定义文本以及按钮样式。</p>
        <pre class="ts">// xxx.ets

@Entry
@Component
struct TimePickerDialogExample {
  @State selectTime: Date = new Date('2023-12-25T08:30:00');

  build() {
    Column() {
      Button('showTimePickerDialog')
        .margin(30)
        .onClick(() =&gt; {
          this.getUIContext().showTimePickerDialog({
            selected: this.selectTime,
            textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
            selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
            acceptButtonStyle: {
              fontColor: '#2787d9',
              fontSize: '16fp',
              backgroundColor: '#f7f7f7',
              borderRadius: 10
            },
            cancelButtonStyle: {
              fontColor: Color.Red,
              fontSize: '16fp',
              backgroundColor: '#f7f7f7',
              borderRadius: 10
            }
          });
        })
    }.width('100%').margin({ top: 5 })
  }
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.00840281437576981527089409129019:50001231000000:2800:F1A36DD8FF3DCBCA502CC9732D68CE94410D31C8D5D9694EE30943AF4573B04F.gif"></span>
        </p></div>
    <div class="section" id="文本滑动选择器弹窗-textpickerdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E6%96%87%E6%9C%AC%E6%BB%91%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-textpickerdialog"></a><a
            name="%E6%96%87%E6%9C%AC%E6%BB%91%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8%E5%BC%B9%E7%AA%97-textpickerdialog"></a>
        <h4>[h2]文本滑动选择器弹窗 (TextPickerDialog)</h4>
        <p>开发者可根据指定的选择范围，创建文本滑动选择器弹窗，将文本信息清晰地展示在弹出的窗口上。</p>
        <p>文本滑动选择器弹窗通过UIContext中的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showtextpickerdialog"
                target="_blank">showTextPickerDialog</a>接口实现。</p>
        <p>
            该示例通过设置range的参数类型为TextCascadePickerRangeContent[]，实现3列文本选择器弹窗。当按下确定按钮时，弹窗会通过onAccept返回目前所选中文本和索引值。如需弹窗再次弹出时显示选中的是上一次确定的文本，就要在回调中重新给select进行赋值。</p>
        <pre class="ts">@Entry
@Component
struct TextPickerDialogExample {
  private fruits: TextCascadePickerRangeContent[] = [
    {
      text: '辽宁省',
      children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
        { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
    },
    {
      text: '吉林省',
      children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
        { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
    },
    {
      text: '黑龙江省',
      children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
        { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
    }
  ];
  private select : number  = 0;
  build() {
    Column() {
      Button('showTextPickerDialog')
        .margin(30)
        .onClick(() =&gt; {
          this.getUIContext().showTextPickerDialog({
            range: this.fruits,
            selected: this.select,
            onAccept: (value: TextPickerResult) =&gt; {
              this.select = value.index as number
            }
          });
        })
    }.width('100%').margin({ top: 5 })
  }
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.68429479765902986037435348225579:50001231000000:2800:0080D3CBF040D3F9901408A2F1C38764AA6ACBABB843E0263B2A4CCCBB72D1EC.gif"></span>
        </p></div>
    <div class="section" id="列表选择弹窗-actionsheet"><a
            name="ZH-CN_TOPIC_0000002278806404__%E5%88%97%E8%A1%A8%E9%80%89%E6%8B%A9%E5%BC%B9%E7%AA%97-actionsheet"></a><a
            name="%E5%88%97%E8%A1%A8%E9%80%89%E6%8B%A9%E5%BC%B9%E7%AA%97-actionsheet"></a>     <h4>列表选择弹窗
        (ActionSheet)</h4>
        <p>列表选择器弹窗适用于呈现多个操作选项，尤其当界面中仅需展示操作列表而无其他内容时。</p>
        <p>列表选择器弹窗通过UIContext中的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showactionsheet"
                target="_blank">showActionSheet</a>接口实现。</p>
        <p>该示例通过配置width、height、transition等接口，定义了弹窗的样式以及弹出动效。</p>
        <pre class="ts">@Entry
@Component
struct showActionSheetExample {
  build() {
    Column() {
      Button('showActionSheet')
        .margin(30)
        .onClick(() =&gt; {
          this.getUIContext().showActionSheet({
            title: 'ActionSheet title',
            message: 'message',
            autoCancel: false,
            width: 300,
            height: 300,
            cornerRadius: 20,
            borderWidth: 1,
            borderStyle: BorderStyle.Solid,
            borderColor: Color.Blue,
            backgroundColor: Color.White,
            transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY
              .animation({ duration: 3000, curve: Curve.Sharp })
              .combine(TransitionEffect.scale({ x: 1.5, y: 1.5 }).animation({ duration: 3000, curve: Curve.Sharp })),
              TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
                .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }).animation({ duration: 100, curve: Curve.Smooth }))),
            confirm: {
              value: 'Confirm button',
              action: () =&gt; {
                console.info('Get Alert Dialog handled');
              }
            },
            alignment: DialogAlignment.Center,
            sheets: [
              {
                title: 'apples',
                action: () =&gt; {
                }
              },
              {
                title: 'bananas',
                action: () =&gt; {
                }
              },
              {
                title: 'pears',
                action: () =&gt; {
                  console.info('pears');
                }
              }
            ]
          });
        })
    }.width('100%').margin({ top: 5 })
  }
}</pre>
        <p><span><img originheight="818" originwidth="526"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163042.61737345866801117399811317193135:50001231000000:2800:17573DF5A539EBF556A0275FA69F9D9EA93C0F6D82036850ED263E0249C85A39.gif"></span>
        </p></div>
    <div class="section" id="警告弹窗-alertdialog"><a
            name="ZH-CN_TOPIC_0000002278806404__%E8%AD%A6%E5%91%8A%E5%BC%B9%E7%AA%97-alertdialog"></a><a
            name="%E8%AD%A6%E5%91%8A%E5%BC%B9%E7%AA%97-alertdialog"></a>     <h4>警告弹窗 (AlertDialog)</h4>
        <p>向用户提问或得到用户的许可时，使用警告弹窗。</p>
        <ul>
            <li>警告弹窗用来提示重要信息，但会中断当前任务，尽量提供必要的信息和有用的操作。</li>
            <li>避免仅使用警告弹窗提供信息，用户不喜欢被信息丰富但不可操作的警告打断。</li>
        </ul>
        <p>警告弹窗通过UIContext中的<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#showalertdialog"
                target="_blank">showAlertDialog</a>接口实现。</p>
        <p>该示例通过配置width、height、transition等接口，定义了多个按钮弹窗的样式以及弹出动效。</p>
        <pre class="ts">@Entry
@Component
struct showAlertDialogExample {
  build() {
    Column() {
      Button('showAlertDialog')
        .margin(30)
        .onClick(() =&gt; {
          this.getUIContext().showAlertDialog(
            {
              title: 'title',
              message: 'text',
              autoCancel: true,
              alignment: DialogAlignment.Center,
              offset: { dx: 0, dy: -20 },
              gridCount: 3,
              transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY
                .animation({ duration: 3000, curve: Curve.Sharp })
                .combine(TransitionEffect.scale({ x: 1.5, y: 1.5 }).animation({ duration: 3000, curve: Curve.Sharp })),
                TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
                  .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 })
                    .animation({ duration: 100, curve: Curve.Smooth }))),
              buttons: [{
                value: 'cancel',
                action: () =&gt; {
                  console.info('Callback when the first button is clicked');
                }
              },
                {
                  enabled: true,
                  defaultFocus: true,
                  style: DialogButtonStyle.HIGHLIGHT,
                  value: 'ok',
                  action: () =&gt; {
                    console.info('Callback when the second button is clicked');
                  }
                }],
            }
          );
        })
    }.width('100%').margin({ top: 5 })
  }
}</pre>
        <p><span><img originheight="626" originwidth="319"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163043.26395938299983184124451844901611:50001231000000:2800:285C4E8520E3A1BCD982985D3D1740EABC700F4626E5BD96D969FD49F34F283A.gif"></span>
        </p></div>
</div>
<div></div>
</body>
</html>